{include file="common/_header"}

<body>

<div class="x-body layui-anim layui-anim-up">
    <form class="layui-form">
        <input type="hidden" name="s_b_id" value="{$data.s_b_id}">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">图片标题</label>
                <div class="layui-input-inline">
                    <input type="text" name="title" autocomplete="off" class="layui-input" lay-verify="required" value="{$data.data.title}">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <input type="hidden" name="images" class="image" value="{$data.data.pic_url}"  lay-verify="required">
            <input type="hidden" name="original_images" class="original_image" value="{$data.data.pic_url}">
            <label class="layui-form-label ">轮播图:</label>
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="test1">上传图片</button><br>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="demo1" width="40%" height="40%" {if !empty($data.data.pic_url)}src="/{$data.data.pic_url}"{/if}>

                    <p id="demoText"></p>
                </div>
            </div>
        </div>
<!--        <div class="layui-form-item">-->
<!--            <div class="layui-inline">-->
<!--                <label class="layui-form-label">图片跳转地址</label>-->
<!--                <div class="layui-input-inline">-->
<!--                    <input type="text" name="tourl" autocomplete="off" class="layui-input" value="{$data.data.to_url}">-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">排序</label>
                <div class="layui-input-inline">
                    <input type="text" name="sort" autocomplete="off" class="layui-input" lay-verify="required" value="{$data.data.sort}">
                </div>
            </div>
        </div>
        <div style="margin-top: 30px; margin-right: 20px; text-align: right">
            <button type="button" lay-submit lay-filter="add" class="layui-btn" >立即提交</button>
        </div>
    </form>
</div>
</body>
<script>
    layui.use('upload', function() {
        var upload = layui.upload;
        //常规使用 - 普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            , url: '/banner/upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });

                // element.progress('demo', '0%'); //进度条复位
                // layer.msg('上传中', {icon: 16, time: 0});
            }
            ,done: function(res){
                console.log(res);
                //如果上传失败
                if(res.code == 1){
                    $('.image').attr('value', res.data);
                    return layer.msg('上传成功');
                } else {
                    layer.msg(res.msg);
                }
                //上传成功的一些操作
                //……
                $('#demoText').html(''); //置空上传失败的状态
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
            //进度条
            ,progress: function(n, elem, e){
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if(n == 100){
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });
    });
</script>
<script>
    layui.use('form', function(){
        var form = layui.form;


        form.on('submit(add)', function (data) {
            $.ajax({
                'url': '/shopbanner/boxshopbanner',
                'type': 'post',
                'data': data.field,
                'dataType': 'json',
                success: function (data) {
                    if(data.code == 1){
                        layer.msg(data.msg, {
                            icon: 6,
                            time: 800,
                        },function () {
                            // console.log(data);
                            window.parent.location.href = data.url;
                        })
                    }
                }
            });
        })
    });

</script>

{include file="common/_bottom"}